<script setup>
import { ref, onMounted, computed } from "vue"
import axios from "axios"

let datas = ref([])
let filterDatas = ref([])
let inputValue = ref("")

onMounted(() => {
  axios.get("http://122.112.161.135:3000/top/playlist").then((res) => {
    // console.log(res.data.playlists)
    datas.value = res.data.playlists
  })
})

//计算属性，分类数据
let res = computed(() => {
  if (inputValue.value == "") {
    return datas.value
  } else {
    return datas.value.filter((item) => {
      return item.tags.find((str) => {
        return str.search(inputValue.value) !== -1
      })
    })
  }
})

//点击删除
function handleDel(id) {
  datas.value.forEach((item, index) => {
    if (item.id == id) {
      datas.value.splice(index, 1)
    }
  })
}
</script>
<template>
  <div class="container">
    <div class="head">
      <span style="margin-right: 24px">华语</span>
      <input
        style="height: 24px"
        type="text"
        placeholder="请输入分类名称"
        v-model="inputValue"
      />
    </div>
    <div class="main">
      <div
        class="box"
        v-for="data in res"
        :key="data.id"
        @click="handleDel(data.id)"
      >
        <img :src="data.coverImgUrl" style="width: 140px; height: 140px" />
        {{ data.name }}
      </div>
    </div>
  </div>
</template>
<style>
.container {
  width: 900px;
  padding: 40px;
  margin: 0 auto;
  background-color: #fff;
}
.head {
  height: 50px;
  margin-bottom: 20px;
  font-size: 24px;
  border-bottom: 2px solid #c20c0c;
}
.main {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.main::after {
  content: "";
  flex: 1;
}
.box {
  width: 140px;
  height: 218px;
}
</style>
